<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>  
  <!--
    实现数据的双向绑定
    逻辑 -> 数据 <-> 视图
    Vue -> v-model
   -->
  <div id="app">
     <div>
       <input type="text" v-model="name" placeholder="姓名" />
       <input type="text" v-model="age" placeholder="年龄" />
       <input type="text" v-model="email" placeholder="邮箱" />
       <input type="text" v-model="tel" placeholder="电话号码" />
     </div>

     <div>
      <p>姓名: <span> {{ name }} </span> </p>
      <p>年龄: <span> {{ age }} </span> </p>
      <p>邮箱: <span> {{ email }} </span> </p>
      <p>
        <p>
          电话: <span> {{ tel }} </span>
        </p>
      </p>
     </div>

     <button id="btn">改变名字的数据</button>
  </div>

  <!-- <script src="./mvvm.js"></script> -->
  <script src="./mvvm-proxy.js"></script>
  <script>
    const app = new MVVM('#app', {
      name: '',
      age: '',
      email: '',
      tel: ''
    })

    document.querySelector('#btn').addEventListener('click', function () {
      app.setData('name', '哇咔咔，我是改变之后的名字');
    }, false);
  </script>
</body>
</html>